<script setup>
  import { computed } from 'vue'
  import { useRouter } from 'vue-router'
  import useCityStore from '@/stores/modules/city'

  // 获取父组件传递的属性数据
  const props = defineProps({
    groupData: {
      type: Object,
      default: () => ({})
    }
  })

  // 定义一个计算属性，目的：动态索引 => 根据已有的城市数据动态设置右侧索引栏的索引值
  const indexList =  computed(() => {
    // indexList.push('#')
    // props.groupData.cities.forEach((item) => {
    //   indexList.push(item.group)
    // })

    // map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
    // MDN文档相关介绍：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
    const list = props.groupData.cities.map((item) => {
      return item.group
    })

    // 方式 1
    // return ['#', ...list]

    // 方式 2
    // push(ele)：在数组尾部插入 ele 元素
    // unshift(ele)：在数组开头插入 ele 元素
    list.unshift('#')
    return list
  })

  // 监听城市的点击
  const router = useRouter()
  const cityStore = useCityStore()
  const cityClick = (city) => {
    // 选中当前城市
    cityStore.currentCity = city

    // 返回上一级
    router.back()
  }
</script>

<template>
  <div class="city-group">
    <!--
      tips：
        1.IndexBar 索引栏组件的右侧索引栏的索引顺序与 van-index-anchor 元素的顺序一一对应
        2.点击右侧索引项时，索引区置顶数据是 index 属性值为当前点击的索引项的van-index-anchor元素
        实现原理：与锚点链接的实现原理应该差不多
       -->
    <!-- 为 index-list 属性动态赋值，目的：根据已有数据动态设置右侧索引栏的索引值 -->
    <van-index-bar :index-list="indexList" highlight-color="#ff9854">
      <!-- 热门城市 -->
      <van-index-anchor index="#">热门</van-index-anchor>
      <div class="list">
        <template v-for="item in groupData.hotCities">
          <div class="city" @click="cityClick(item)">{{ item.cityName }}</div>
        </template>
      </div>

      <!-- 城市索引区 -->
      <template v-for="(group, index) in groupData.cities" :key="index">
        <van-index-anchor :index="group.group" />
        <template v-for="(city, indey) in group.cities" :key="indey">
          <van-cell :title="city.cityName" @click="cityClick(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<style lang="less" scoped>
  .list {
    display: flex;
    flex-wrap: wrap;
    // space-evenly 的兼容性较差，慎用！
    justify-content: space-around;
    padding: 10px;
    padding-right: 25px;

    .city {
      width: 70px;
      height: 28px;
      line-height: 28px;
      border-radius: 14px;
      font-size: 12px;
      color: #000;
      text-align: center;
      background-color: #fff4ec;
      margin: 6px 0;
    }
  }
</style>